<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22222</title>
</head>
<body>
    <div id="app">
        <div class="course" v-for="(item,index) in boardList" :class="[{'list-last':index%2!==0},'index-board-'+item.id]">
            <div class="inner">
                <h2>{{item.title}}</h2>
                <p class="des">{{item.description}}</p>
                <div class="btn">
                    <button>立即购</button>
                </div>
            </div>
            fff
        </div>
    </div>
    <script type="text/javaScript"  charset="UTF-8" src="../JS文件/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                boardList:[{
                        title:'Vue课程',
                        description:'是一套用于构建用户界面的渐进式框架。',
                        id:'Vue',
                        toKey:'analysis',
                        saleout:false
                },
                {
                    title:'JavaScript课程',
                    description:'是一种直译式脚本语言，是一种动态类型。弱类型,基于原型的语言，内置支持类型。',
                    id:'js',
                    toKey:'count',
                    saleout:'false'
                },
                {
                    title:'HTML课程',
                    description:'超文本标记语言（HyperText Markup Language）,HTML是一种用于创建网页的标准标记语言。',
                    id:'html',
                    toKey:"forecast",
                    saleout:true
                },
                {  title:'java课程',
                    description:'是一门面向对象编程语言',
                    id:'java',
                    toKey:'publish',
                    saleout:false
                }
                ],
            }
        })
    </script>
</body>
</html>